<template>
	<div class="sendNotice">
		<div class="classIndex_lk">
			<router-link to="/classIndex/classNotice">学生成绩</router-link>
			<router-link to="###"><i>></i>新增成绩</router-link>
		</div>
		<div class="sendNotice_form">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="班级名称" prop="className">
					<el-input class="disadVal" v-model="ruleForm.className" disabled placeholder="请输入通知标题"></el-input>
				</el-form-item>
				<el-form-item label="成绩标题" prop="name">
					<el-input v-model="ruleForm.name" placeholder="请输入成绩标题"></el-input>
				</el-form-item>
				<el-form-item label="学生成绩" prop="desc">
					<el-input  v-model="ruleForm.desc" placeholder="请输入通知标题"></el-input>
				</el-form-item>
				<el-form-item label="上传附件">
					<div class="">
						<el-upload
						  class="upload-demo"
						  ref="upload"
						  action="https://jsonplaceholder.typicode.com/posts/"
						  :on-preview="handlePreview"
						  :on-remove="handleRemove"
						  :file-list="fileList"
						  :limit="1"
						  :auto-upload="false">
						  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
						  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
						  <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
						</el-upload>
					</div>
				</el-form-item>
				<el-form-item class="">
					<div class="Atemplate clear">
						<div class="Atemplate_l fl">
							<span><img src="../../../public/images/format/excel.png"></span>
							<strong>下载EXCEL模版</strong>
						</div>
						<div class="Atemplate_r fr">
							温馨提示：请选择相应班级，再下载导入模版，录入完学生成绩后导入发布成绩，且学生只能看见自己的成绩
						</div>
					</div>
				</el-form-item>
				<el-form-item class="sendNotice_btn buttonCSS">
					<el-button type="primary" plain @click="resetForm('ruleForm')">取消</el-button>
					<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	
	export default {
		data() {
			return {
				ruleForm: {
					name: '',
					desc: '',
					className: '高一（二）班'
				},
				rules: {
					name: [
						{ required: true, message: '请输入成绩标题', trigger: 'blur' },
						{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
					],
					desc: [
						{ required: true, message: '请输入通知标题', trigger: 'blur' },
						{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
					]
				},
				fileList: [
					{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
				]

			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			submitUpload() {
				this.$refs.upload.submit();
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			}

		}
	}
</script>